<template>
	<div class="advertEdit">
		<!--  -->
		<el-dialog v-model="isShowDialog" width="700px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div>修改开屏广告</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
				<el-form-item label="时间选择" prop="times">
					<el-date-picker v-model="formData.times" type="datetimerange" range-separator="-"
						start-placeholder="开始时间" end-placeholder="结束时间" />
				</el-form-item>
				<el-form-item label="访问地址">
					<el-input v-model="formData.url" placeholder="请输入访问地址" />
				</el-form-item>
				<el-form-item label="状态" prop="states">
					<el-select v-model="formData.states" placeholder="请选择状态" clearable>
						<el-option :value="1" label="启用" />
						<el-option :value="2" label="停用" />
					</el-select>
				</el-form-item>
				<el-form-item label="文件">
					<el-upload list-type="picture-card" :auto-upload="false" :show-file-list="true" :limit="1"
						accept=".pdf,.jpg,.png" v-model:file-list="fileList"
						:class="{ 'hide_box': fileList.length != 0 }" :on-remove="handleFileRemove">
						<el-tooltip effect="dark" content="支持PDF/JPG/PNG格式">
							<el-icon>
								<Plus />
							</el-icon>
						</el-tooltip>
						<template #file="{ file }">
							<div>
								<img class="el-upload-list__item-thumbnail" :src="fileList[0].url" alt="" />
								<span class="el-upload-list__item-actions">
									<span class="el-upload-list__item-preview"
										@click="handlePictureCardPreview(fileList[0].url)">
										<el-icon><zoom-in /></el-icon>
									</span>
									<span class="el-upload-list__item-delete" @click="handleDownload(fileList[0].url)">
										<el-icon>
											<Download />
										</el-icon>
									</span>
									<span class="el-upload-list__item-delete" @click="handleFileRemove">
										<el-icon>
											<Delete />
										</el-icon>
									</span>
								</span>
							</div>
						</template>
					</el-upload>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="PicdialogVisible">
			<img w-full :src="dialogImageUrl" alt="封面图预览" />
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { editLaunchApi } from '@/api/operationsManage/advert'
import { updateParamsWithDateRange } from '@/utils';
export default defineComponent({
	name: 'advertEdit', //开屏广告修改
	components: {},
	// props: {},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			formData: {
				states: undefined,
				url: undefined,
				beginTime: undefined,
				endTime: undefined,
				times: []
			},
			// 表单校验
			rules: {
				times: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
				states: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			const { img, beginTime, endTime } = row
			fileList.value = [{ url: img }]
			state.formData = row
			state.formData.times = [beginTime, endTime]
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 提交
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					if (fileList.value.length == 0) return ElMessage.error('请上传文件')
					state.loading = true;
					let obj = updateParamsWithDateRange(state.formData.times)
					const mergedObj = Object.assign({}, state.formData, obj);
					delete mergedObj.times
					const formData = new FormData();
					formData.append('file', fileList.value[0].raw)
					for (let key in mergedObj) {
						let value = mergedObj[key]
						if (value != undefined) formData.append(key, value)
					}
					editLaunchApi(formData).then((res: any) => {
						if (res.code === 200) {
							ElMessage.success('修改成功');
							closeDialog(); // 关闭弹窗
							emit('getList');
						} else {
							state.loading = false;
						}
					})
				}
			});
		};
		const resetForm = () => {
			state.formData = {
				states: undefined,
				url: undefined,
				beginTime: undefined,
				endTime: undefined,
				times: []
			};
			fileList.value = []
		};
		const fileList = ref([])

		// 预览
		const dialogImageUrl = ref('')
		const PicdialogVisible = ref(false)
		const handlePictureCardPreview = (file) => {
			dialogImageUrl.value = file
			PicdialogVisible.value = true
		}
		// 下载
		const handleDownload = (file) => {
			// 检查文件是否有 url 属性，若有则直接下载 
			if (file) {
				const link = document.createElement('a');
				link.href = file;
				// 使用文件原始名称作为下载文件名 
				link.download = file.name || 'download';
				link.click();
				// 清理创建的元素 
				link.remove();
			} else {
				ElMessage.error('无法获取文件下载信息');
			}
		}
		const handleFileRemove = () => {
			// 文件移除时的处理
			fileList.value = []; // 更新文件列表
		}
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			resetForm,
			menuRef,
			formRef,
			PicdialogVisible,
			dialogImageUrl,
			handlePictureCardPreview,
			handleDownload,
			handleFileRemove,
			fileList,
			...toRefs(state),
		};
	},
});
</script>
<style lang="scss">
.advertEdit {
	.hide_box .el-upload--picture-card {
		display: none !important;
	}

	.el-upload,
	.el-upload-list__item {
		width: 200px !important;
		height: 410px !important;
	}
}
</style>
